<div class="collaborative-texts-suggestions-box-item-header">
  <div>{{PROFILE}}</div>
  <div class="relative z-1">
    <button class="collaborative-texts-suggestions-box-item-dropdown"
            id="dropdown-trigger-{{ID}}"
            data-controller="dropdown"
            data-target="dropdown-menu-{{ID}}"
            data-auto-close="true"
            aria-label="<%= t("decidim.collaborative_texts.document.controls_label") %>">
      <span class="sr-only"><%= t("decidim.collaborative_texts.document.controls_label") %></span>
      <%# NOTE: having two times the icon call is intentional, as that is how the `dropdown` CSS code is done %>
      <%= icon "more-fill" %>
      <%= icon "more-fill" %>
    </button>

    <div class="collaborative-texts-suggestions-box-header-menu" id="dropdown-menu-{{ID}}" role="menu" aria-labelledby="dropdown-trigger-{{ID}}" tabindex="-1" aria-hidden="true">
      <ul class="dropdown dropdown__bottom divide-y divide-gray-3 pt-1 pb-0" role="menu">
        <li role="menuitem" class="dropdown__item">
          <button class="button-apply dropdown__button">
            <%= icon "checkbox-circle-line" %>
            <%= t("decidim.collaborative_texts.document.apply") %>
          </button>
          <button class="button-restore dropdown__button">
            <%= icon "arrow-go-back-line" %>
            <%= t("decidim.collaborative_texts.document.restore") %>
          </button>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="collaborative-texts-suggestions-box-item-text"></div>
